<!DOCTYPE html>
<html>
  <head>
    <!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> -->
 	<link rel="stylesheet" href="./style/style.css" media="screen">	
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" media="screen">

	<script src="js/lib/dojo-release-1.7.1/dojo/dojo.js.uncompressed.js" data-dojo-config="parseOnLoad: true"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAlxENk4JH41J3XvwpHSH2sTuNpNNO1n-I&sensor=false"></script>

	<script>
		dojo.require("dojo.parser");
		dojo.require("dijit.layout.BorderContainer");
		dojo.require("dijit.layout.ContentPane");
	</script>
		
    <script type="text/javascript">
      function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      }
    </script>
  </head>
  	
	<body class="claro" onload="initialize()" >
		<div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
			<div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
			    <div id="map_canvas" style="width:100%; height:100%"></div> 
			</div>
			<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">Header content (top)</div>
			<div id="leftCol" class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div>
		</div>
	</body>
	  	
</html>